<script setup>
import FromComponent from "./modle/FormComponent.vue";
import {computed, onMounted, ref, watch} from "vue";
import {useStore} from "vuex";
import axios from "axios";
import {ElMessage} from "element-plus";
import AEModle from "@/components/form/ operate/AEModle.vue";
import FM from "@/components/form/right/sunkaixuan/FMComponent.vue";

let imgs = ref([])
let systemUserArr = ref([]);
axios.get("/getEmployeeInfo").then(res => {
   //console.log(res.data.data);
   store.commit("setSystemUserArr", res.data.data);
   systemUserArr.value = res.data.data;
   //console.log(systemUserArr.value);
   for (let i = 0; i < systemUserArr.value.length; i++) {
      axios.get("/file/img?filename=" + systemUserArr.value[i].tx, {
         responseType: 'blob',
         headers: {
            'token': "1111"
         },
      })
          .then(resp => {
             //console.log(resp);
             //console.log(resp.data);
             // 将 blob 数据转换为 URL 对象
             imgs.value[i] = URL.createObjectURL(resp.data);
          })
          .catch(err => {
             console.log(err);
          });
   }
}).catch(err => {
   console.log(err);
})

//请求部门
onMounted(() => {
   axios.get("/department/query").then(res => {
      console.log("----------------------------" + JSON.stringify(res.data.data));
      departmentArr.value = res.data.data;
      store.commit("setDepartmentArr", departmentArr.value)
      departmentArr.value.unshift({did: 0, dname: "无"})
   }).catch(err => {
      console.log(err);
   })
   axios.get("/positionInfo/query").then(res => {
      console.log("----------------------------" + JSON.stringify(res.data.data));
      store.commit("setPositionArr", res.data.data)
   }).catch(err => {
      console.log(err);
   })



})

const img = ref("")
const store = useStore();
let departmentArr = ref([])
//表头,自己按照systemUserArr定,且systemUserArr中顺序不能变
let labArr = ref([{id: "id"}, {name: "姓名"}, {tel: "电话"}, {positionName: "职位"}, {departmentName: "部门"}])
let labArr1 = ref([{name: "姓名"}, {tel: "电话"}])
//console.log(systemUserArr);
let input_user = ref("")
let input_jiaose = ref("")

let editIndex = ref(0)
//搜索下拉框选项
let departmentOptions = ref([])

//去除空格
function trim(str) {
   return str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');
}

function search() {
   input_user.value = trim(input_user.value)
   //console.log("去除空格" + input_user.value)
   systemUserArr.value = [store.state.systemUserArr];
   //console.log(store.state.systemUserArr)
   for (let i = 0; i < systemUserArr.value.length; i++) {
      //console.log("search" + i)
      //都不为空
      if (input_user.value !== "" && input_jiaose.value !== "") {
         console.log("都不为空")
         console.log(systemUserArr.value[i].departmentName, input_jiaose.value, systemUserArr.value[i].name, input_user.value)
         //完全一样时保留
         if (input_user.value === systemUserArr.value[i].name && input_jiaose.value === systemUserArr.value[i].departmentName) {
            //console.log("search保留" + i)
            //否则删除
         } else {
            systemUserArr.value.splice(i, 1)
            console.log("search判断都不为空时删除" + i)
            i--;
         }
         continue
      }
      //用户名为空
      if (input_user.value === systemUserArr.value[i].name || input_jiaose.value === systemUserArr.value[i].departmentName || (input_user.value === "" && input_jiaose.value === "")) {
      } else {
         systemUserArr.value.splice(i, 1)
         console.log("user" + input_user.value + "role" + input_jiaose.value + "search判断删除" + i)
         i--;
      }
   }
}

function deleteForm(index) {
   console.log("删除" + index);

   //删除数组中指定元素
   axios.delete("/deleteEmployeeInfo?id=" + systemUserArr.value[index].id).then(res => {
      //console.log(res);
      if (res.data.code === 200) {
         ElMessage("删除成功")
         systemUserArr.value.splice(index, 1);
      } else {
         ElMessage("删除失败")
      }
   }).catch(err => {
      console.log(err);
   })

   store.commit("setSystemUserArr", systemUserArr)
}

function add() {
   store.commit("setShow", true)
   type.value = true
}
function upData(index) {
   console.log("编辑" + index);
   editIndex.value = index;
   store.commit("setShow", true)
   type.value = false
}

let type = ref(true)


</script>

<template>
   <div class="home">
      <AEModle :label-arr="labArr1"  :type="type">
      </AEModle>
      <div class="f-top">
         <div class="add_xaoqu">
            <!--        添加元素组件-->
            <button
                style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;margin-left:20px;color: white;border: none;float: none"
                @click="add">添加
            </button>

         </div>
      </div>

      <from-component z-index="1" :label-arr="labArr" :table-data="systemUserArr">
         <!--         头像-->
         <el-table-column label="头像" width="100">
            <template v-slot="scope">
               <img style="width:80px;height: 80px " :src="imgs[scope.$index]" alt="加载失败"/>
            </template>
         </el-table-column>
         <el-table-column label="操作" width="270">
            <template v-slot="scope">
               <button
                   style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;float: none"
                   @click="deleteForm(scope.$index)">删除
               </button>


               <button
                   style="height:25px;font-size: 14px;background-color: rgba(64,158,255,0.81);width: 100px;text-align:  center;cursor:pointer;border-radius: 10px;color: white;border: none;margin-left:20px;float: none"
                   @click="upData(scope.$index)">编辑
               </button>
            </template>
         </el-table-column>
      </from-component>
   </div>
</template>

<style scoped>
.f-left {
   padding: 5px;
   font-size: 20px;
   float: left;
   margin-left: 20px;
   margin-top: 20px;
}

.demo-date-picker {
   padding: 5px;
   font-size: 20px;
   margin-left: 20px;
   float: left;
   margin-top: 20px;
   border-radius: 5px;
}

.add_xaoqu {
   position: relative;
   top: 25px;
   z-index: 10;
}

</style>